<template>
        <!-- 轮播图的地方 -->
              <div class="swiper-container"  ref="cur">
                <div class="swiper-wrapper" >
                  <div class="swiper-slide" v-for="(carousel,index) in list" :key="carousel.id">
                    <img :src="carousel.imgUrl" />
                  </div>
   
                </div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>
              </div>
</template>

<script>
//引入Swiper
import Swiper from 'swiper';
export default {
    name:'Carsousel',
    props:['list'],
      watch:{
    list:{
      // 为什么watch没有监听到变化
      //因为数据没有变化  所以监听不到（数据是父亲给的  父亲给的时候就是一个对象 对象里面该有的数据都是有的） 
      //所以要加个立即监听(无论数据是否变化  上来立即监听一次)
      immediate:true,
      handler(){
        //只能监听到数据已经有了  但是v-for动态渲染结构我们还是没办法确定的  因此还是需要用到nextTick
        this.$nextTick(()=>{
             var mySwiper = new Swiper (this.$refs.cur, {
    // direction: 'vertical', // 垂直切换选项
    loop: true, // 循环模式选项
    
    // 如果需要分页器
    pagination: {
      el: '.swiper-pagination',
    },
    
    // 如果需要前进后退按钮
    navigation: {
      nextEl: '.swiper-button-next',
      prevEl: '.swiper-button-prev',
    },

  })   
        })
        // console.log('我在监听floor组件中的list数据')
      }
    }
  }

}
</script>

<style scoped>

</style>